<template>
    <div :style="{height: contentHeight + 'px'}" class="row">
        <div class="left">
            <div v-for="(item,index) in nameList" :class="['left-text-wrapper', 'row', index===page?'active-left':'']"  @click="goTo(index)">
                <text :class="['left-text',index===page?'active-left-text':'']">{{item.name}}</text>
            </div>
        </div>
        <div class="right flex">
            <scroller class="list" :style="{height: contentHeight + 'px'}">
                <div class="row center" @appear="titleAppear(0)">
                    <text ref="ref-0" class=" title">男生</text>
                </div>
                <div class="row sort-item">
                    <sort-item  v-for="temp in male" :item="temp" :key="temp.name" :bookType="'male'" @goToSoreMore="goToSoreMore"></sort-item>
                </div>

                <div class="row center" @appear="titleAppear(1)">
                    <text  ref="ref-1"  class="center title">女生</text>
                </div>
                <div class="row sort-item">
                    <sort-item v-for="temp in female" :item="temp" :key="temp.name" :bookType="'female'" @goToSoreMore="goToSoreMore"></sort-item>
                </div>

                <div class="row center" @appear="titleAppear(2)">
                    <text ref="ref-2" class="center title">出版</text>
                </div>
                <div class="row sort-item">
                    <sort-item v-for="temp in press" :item="temp" :key="temp.name" :bookType="'press'" @goToSoreMore="goToSoreMore"></sort-item>
                </div>
            </scroller>
        </div>
    </div>
</template>

<script>

    import {sort_major_info} from '../../store/actions'
    import SortItem from './SortItem'
    const dom = weex.requireModule('dom');
    export default {
        name: "sort",
        components:{SortItem},
        data() {
            return {
                nameList: [{name:'男生'}, {name:'女生'}, {name:'出版'}],
                male: [],
                female: [],
                press: [],
                pre: 0,
                page: 0,
                majorInfo:{},
            }
        },
        props:{
            contentHeight:{
                type: Number,
                default: 1344 - 90,
            }
        },
        mounted(){
            let self = this;
            sort_major_info({
                callback: function (data) {
                    self.majorInfo = data;
                    self.male = self.majorInfo['male'];
                    self.female = self.majorInfo['female'];
                    self.press = self.majorInfo['press'];
                }
            })
        },
        methods: {
            goTo(index) {
                this.page = index;
                let el = this.$refs['ref-'+index];
                dom.scrollToElement(el, {offset: 0});
            },
            titleAppear(index){
                this.page = index;
            },
            goToSoreMore(obj){
                this.$router.push({name: 'soreMore', query: obj});
            }
        },
    }
</script>

<style scoped>
    .row {
        flex-direction: row;
    }
    .left{
        justify-content: center;
        align-content: center;
    }
    .left-text-wrapper{
        padding: 40px 20px;
        margin-left: 10px;
    }
    .left-text{
        padding-left: 30px;
        font-size: 38px;
    }
    .active-left{
        background-color: rgba(0,0,0, .05);
    }
    .active-left-text {
        border-left-style: solid;
        border-left-width: 4px;
        border-left-color: #d81e06;
    }

    .right {
        flex: 1;
        padding-left: 10px;
        padding-right: 10px;
    }

    .flex {
        flex: 1;
    }
    .center{
        /*justify-content: center;*/
        /*align-content: center;*/
        /*align-items: center;*/
        /*justify-items: center;*/
        align-items: center;
        justify-content: center;
    }
    .title{
        margin-top: 50px;
        margin-bottom: 20px;
    }
    .sort-item{
        flex-wrap: wrap;
        justify-content: space-between;
    }
</style>